﻿@model IEnumerable<PrjctMngmt.Models.Note>

@{
    ViewBag.Title = "Notes";
}

<h2>Notes</h2>

<p>
    @Html.ActionLink("Add new note", "Create")
</p>

<script type="text/javascript">
    $(function () {
        $("#tabs").tabs();
    });
</script>

<script type="text/javascript">
    $(function () {
        $(".note").draggable({
            containment: '#note-tab',
            cursor: 'move',
            snap: '#note-tab',
            drag: function (event, ui) {
                this.style.opacity = 0.5
                dragging = true;
            },
            stop: function (event, ui) {
                this.style.opacity = 1.0

                //calculate final location
                //TODO: FIX
                var width = $("#note-tab").width();
                var height = $("#note-tab").height();
                var left = 100 - (width - $(this).position().left) / width * 100;
                var top = 100 - (height - $(this).position().top) / height * 100;

                var LocX = left + "";
                var LocY = top + "";
                LocX = LocX.substr(0, 6) + "%";
                LocY = LocY.substr(0, 6) + "%";

                dragging = false;

                //post back new location
                $.post("/Note/UpdateLocation?id=" + $(this).attr("id") + "&LocX=" + LocX + "&LocY=" + LocY, function () { });
            }
        });
    });
</script>

<script type="text/javascript">
    $(document).ready(function () {

        $("#confirmNoteDelete").dialog({
            modal: true,
            autoOpen: false
        });

        $(".removeNote").click(function (e) {
            e.preventDefault();
            var id = $(this).parent().attr("id");
            var url = '@Url.Action("Delete", "Note", new { id = "id" })';
            url = url.replace("id", id);

            $("#confirmNoteDelete").dialog('option', 'buttons', {
                "Confirm": function () {
                    $.post(url,
                            null,
                            function (data) {
                                window.location.reload();
                            }
                    );
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            });

            $("#confirmNoteDelete").dialog("open");
        });
    });
</script>

<div id="tabs">
	<ul>
        @foreach (var proj in (List<PrjctMngmt.Models.Project>)ViewData["Projects"])
        {
		    <li><a href="#@proj.ProjectID">@proj.Name</a></li>
        }
	</ul>
    @foreach (var proj in (List<PrjctMngmt.Models.Project>)ViewData["Projects"])
    {
        <div id="note-tab">
            <div id="@proj.ProjectID">
                <!-- List project's notes here -->
                @foreach (var item in Model)
                {
                    if (item.ProjectID == proj.ProjectID)
                    {
                    <div id="@item.NoteID" class="note" style="left:@item.LocX; top:@item.LocY">
                        <img alt="Remove" title="Remove" class="removeNote ButtonLink removeIcon" src="../../Content/themes/base/images/remove-icon.png" />
                        <div class="note-content">
                            @item.Data
                        </div>
                    </div>
                    }
                }
            </div>
        </div>
    }
</div>

<div id="confirmNoteDelete" title="Confirmation">
	<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Are you sure you want to delete this note?</p>
</div>
